
<ui:composition template="template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:icecore="http://www.icefaces.org/icefaces/core"
                xmlns:ace="http://www.icefaces.org/icefaces/components"
                xmlns:ice="http://www.icesoft.com/icefaces/component"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="body_content">

        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg" style="text-align: center">Sistema de Información Vehicular | Reservación de eventos</h3>
        <!--Info general-->
        <h:form>
            <!--Ace tabs-->
            <ace:tabSet  clientSide="true" styleClass="panel-tabs">
                <ace:tabPane id="panelVisita" label="Paso 1.Información general" styleClass="no-margin-top" >
                    <!--Ace tabs-->
                
                    <ace:panel styleClass="contenedorDatos" >
                        <h:panelGrid columns="1" width="100%" >
                            <p class="titulo_panel">Por favor rellene los campos del formulario de la izquierda. Los campos marcados con (*) son requeridos..<span class="titulo_panel"></span></p>
                        
                            <ace:textEntry id="firstNameInput" value="#{reservacionEventoFacadeManaged.reservacionEventoLocal.nombreEvento}" label="Nombre evento" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                                <ace:ajax render="@this firstNameOutput firstNameMsg"/>
                            </ace:textEntry>
                        
                            <ace:textAreaEntry id="descripcion" label="Descripción del evento" labelPosition="left" required="true" value="#{reservacionEventoFacadeManaged.reservacionEventoLocal.descripcion}"/>
                            <h:panelGrid  columns="1">
                                <ace:textEntry id="cantidadEspacios"  value="#{reservacionEventoFacadeManaged.reservacionEventoLocal.cantidadEspacios}" label="Cantidad de espacios" labelPosition="left" > </ace:textEntry>
                                <p> Rango de espacios:</p>
                        
                                <ace:textEntry id="rangoEstacionamiento1" label="Desde" value="#{reservacionEventoFacadeManaged.reservacionEventoLocal.rangoInicial}" labelPosition="left" maxlength="5"> </ace:textEntry>
                                <ace:textEntry id="rangoEstacionamiento2" label="Hasta" value="#{reservacionEventoFacadeManaged.reservacionEventoLocal.rangoFinal}" labelPosition="left" maxlength="5"> </ace:textEntry>
                            </h:panelGrid>
                        
                        
                            <!--TOOLTIPS-->
                            <ace:tooltip id="tooltipNombre"
                                         for="firstNameInput"
                                         speechBubble="true"
                                         showEffect="slide"
                                         hideEffect="grow"
                                         showDelay="500"
                                         hideDelay="300"
                                         position="bottomLeft"
                                         targetPosition="topRight"
                                         showEffectLength="300"
                                         hideEffectLength="300">
                                <h:panelGrid styleClass="tooltipBoxStyle"> 
                                    <h:graphicImage  id="img0" value="#{tooltipOverviewBean.carSet[0].path}" alt="#{tooltipOverviewBean.carSet[0].description}"/>
                                    <h:outputText id="desc0" value="Nombre no debe contener números"/>
                                </h:panelGrid>   
                            </ace:tooltip>
                            <!--TOOLTIPS generales-->
                        </h:panelGrid>
                    
                    </ace:panel>
                
                </ace:tabPane>
            
                <!--FIN INFO general-->        
            
                <!--Info Horario-->
                <ace:tabPane id="panelVisitaHorario" label="Paso 2.Registrar horario">
                    <!-- Panel Grid horario -->
                    <h:panelGrid styleClass="centeredPanelGrid" >
                        <ace:panel id="horarioInputPanel" styleClass="contenedorDatos">
                            <p class="titulo_panel">Por favor rellene los campos del formulario de la izquierda. Los campos marcados con (*) son requeridos..<span class="titulo_panel"></span></p>
                            <h:panelGrid id="inputGrid2" columns="1" width="100%" styleClass="textEntryInputTable">
                                <h:panelGrid id="calendarPanel" width="100%" columns="1">
                                    <ace:dateTimeEntry id="fecha"
                                                       value="#{horarioReservacionEventoFacadeManaged.horarioReservacionEventoLocal.fecha}"
                                                       timeZone="Canada/Mountain"
                                                       pattern="dd/MM/yyyy"
                                                       renderAsPopup="true"
                                                       label="Fecha de reservación"
                                                       labelPosition="left"/>
                                    <ace:textEntry id="horasInicio" label="Hora de inicio" labelPosition="left" value="#{horarioReservacionEventoFacadeManaged.horarioReservacionEventoLocal.horaInicio}"> </ace:textEntry>
                                    <ace:textEntry id="horasSalida" label="Hora de salida" labelPosition="left" value="#{horarioReservacionEventoFacadeManaged.horarioReservacionEventoLocal.horaFin}"> </ace:textEntry>
                                    <h:commandButton id="agregarFecha" type="button" onclick="confirmation.show()" styleClass="botonEnviarConsulta" value="Agregar Fecha" />
                                         <ace:confirmationDialog id="confirmDialog"
                                                    widgetVar="confirmation"
                                                    message="Seguro(a) que desea guardar esta información?"
                                                    header="Confirmación"
                                                    width="450"
                                                    height="200"
                                                    modal="false"
                                                    closeOnEscape="true"
                                                    closable="true"
                                                    position="center"
                                                    styleClass="dialog-margin">
                                <h:panelGrid columns="2" styleClass="centeredPanelGrid">
                                    <h:commandButton id="yes" value="Sí" onclick="confirmation.hide()" actionListener="#{horarioReservacionEventoFacadeManaged.guardar()}"/>
                                    <h:commandButton id="no" value="No" onclick="confirmation.hide()" action="#{horarioReservacionEventoFacadeManaged.doNothing()}" />
                                </h:panelGrid>
                            </ace:confirmationDialog>
                        
                                </h:panelGrid>
                                <ace:panel id ="PanelHorariodetalle" header="Horario">
                             <f:view> 
                                 <html id="outputHtml1"> 
                                     <head id="outputHead1"> 
                                         <ice:outputStyle href="./resources/stylesheet.css" id="outputStyle1"/> 
                                         <ice:outputStyle href="./xmlhttp/css/xp/xp.css" id="outputStyle2"/> 
                                     </head> 
                                     <body id="outputBody1" style="-rave-layout: grid">
                                             <ice:dataTable width="95%" resizable="true" id="dataTable1" value="#{horarioReservacionEventoFacadeManaged.listaHorariosReservacion}" var="currentRow"> 
                                                 <ice:column id="column1"> 
                                                     <ice:outputText id="outputText1" value="#{currentRow.idHorarioReservacionEvento}"/> 
                                                     <f:facet name="header"> <ice:outputText value="id"/> 
                                                     </f:facet>   
                                                 </ice:column> 
                                                 <ice:column id="column2"> 
                                                     <ice:outputText id="outputText3" value="#{currentRow.fecha}"/> 
                                                     <f:facet name="header"> <ice:outputText id="outputText4" value="Fecha reservacion"/> 
                                                     </f:facet>
                                                 </ice:column> 
                                                 <ice:column id="column3"> 
                                                     <ice:outputText id="outputText5" value="#{currentRow.horaInicio}"/> 
                                                     <f:facet name="header" ><ice:outputText id="outputText6" value="Hora inicio"/> 
                                                     </f:facet> 
                                                 </ice:column> 
                                                 <ice:column id="column4"> 
                                                     <ice:outputText id="outputText7" value="#{currentRow.horaFin}"/> 
                                                     <f:facet name="header"> <ice:outputText id="outputTex8" value="Hora final"/> 
                                                     </f:facet> 
                                                 </ice:column> 
                                             </ice:dataTable>
                                     </body> 
                                 </html> 
                             </f:view>
                                </ace:panel> 
                      
                            </h:panelGrid>
                        </ace:panel>
                    </h:panelGrid>     
                </ace:tabPane>        
                <!--Info Horario-->
                <ace:tabPane id="panelEventoVehiculo" label="Paso 3.Registrar vehículos">   
                    <h:panelGrid styleClass="centeredPanelGrid" >
                        <h:panelGrid id="Vehiculos" width="100%" columns="2">
                            <ace:textEntry id="placaVehiculo" label="Placa vehículo" labelPosition="left" value="#{registroPlacaEventoFacadeManaged.registroPlacaEventoLocal.placa}" >
                            </ace:textEntry>
                            <h:commandButton  id="agregarVehiculo" type="button" onclick="confirmation.show()" styleClass="botonEnviarConsulta" value="Agregar vehículo"/>
                                               <ace:confirmationDialog id="confirmDialog2"
                                                    widgetVar="confirmation"
                                                    message="Seguro(a) que desea guardar esta información?"
                                                    header="Confirmación"
                                                    width="450"
                                                    height="200"
                                                    modal="false"
                                                    closeOnEscape="true"
                                                    closable="true"
                                                    position="center"
                                                    styleClass="dialog-margin">
                                <h:panelGrid columns="2" styleClass="centeredPanelGrid">
                                    <h:commandButton id="si" value="Sí" onclick="confirmation.hide()" actionListener="#{registroPlacaEventoFacadeManaged.guardar()}"/>
                                    <h:commandButton id="noo" value="No" onclick="confirmation.hide()" action="#{registroPlacaEventoFacadeManaged.doNothing()}" />
                                </h:panelGrid>
                            </ace:confirmationDialog>
                        </h:panelGrid>   
                    </h:panelGrid>   

                    <ace:panel id="PanelResultados" header="Vehiculos registrados">
                        <ice:dataTable
                            value="#{tableBean.carInventory}"
                            var="item"
                            width="100%">
                            
                            <!-- Stock number -->
                            <ice:column>
                                <f:facet name="header">
                                    <ice:outputText value="Vehiculo"/>
                                </f:facet>
                                <ice:outputText  style="text-align: center;" value="# ID"/>
                            </ice:column>
                            <!-- Model number -->
                            <ice:column>
                                <f:facet name="header">
                                    <ice:outputText value="Placa #"/>
                                </f:facet>
                                <ice:outputText  style="text-align: center;" value="#{item.placa}"/>
                            </ice:column>
                        
                        
                        
                        
                            <!-- Description  -->
                        
                        
                            <!-- Odometer reading -->
                        
                        
                        </ice:dataTable>
                    </ace:panel> 
                </ace:tabPane>
                <!-- Tooltips \ -->
            </ace:tabSet>
                
        </h:form>
    
        
            </ui:define>
</ui:composition>
